<template>
    <div class="user-pay" ref="Lists">
      <ul v-if="!showData" class="pl13-pt13">
        <li v-for="item in payData" :key="item.index">
          <section>
            <p class="f18">{{item.name}}</p>
            <p class="f12" style="color: #B5B5B5">{{item.time}}</p>
          </section>
          <p class="f20" style="color: #747474;"><span v-if="item.name === pay">-</span><span v-else>+</span>{{item.price}}</p>
        </li>
      </ul>
      <ul v-else>
        <li v-for="item in rechargeSuccess" :key="item.index">
          <section>
            <p class="f16">{{item.name}}</p>
            <p class="f12" style="color: #AEAEAE">{{item.time}}</p>
          </section>
          <section class="tr">
            <p class="f12" style="color: #747474">{{item.status}}</p>
            <p class="f18" style="color: #F54727"><span class="f12">￥</span>{{item.price}}</p>
          </section>
        </li>
      </ul>
      <p v-if="!queryLoading" class="tc pt10 pb10 f12">已经到底</p>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'user-pay-infor',
        created () {
        },
        mounted () {
          this.$nextTick(() => {
            let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            this.$refs.Lists.style.height = h + 'px';
          });
        },
        data () {
          return {
            showData: false,
            loading: false,
            pay: '在线支付',
            recharge: '余额充值',
            payData: [{id: 1, name: '余额充值', time: '2018.11.15 15:23', price: 200},
              {id: 2, name: '在线支付', time: '2018.11.15 15:23', price: 500},
              {id: 3, name: '在线支付', time: '2018.11.15 15:23', price: 300},
              {id: 4, name: '余额充值', time: '2018.11.15 15:23', price: 400},
              {id: 5, name: '在线支付', time: '2018.11.15 15:23', price: 700}
            ],
            rechargeSuccess: [
              {id: 1, name: '小钻风(Smore)', time: '2018.11.15 15:23', status: '充值成功', price: 500},
              {id: 1, name: '小钻风(Smore)', time: '2018.11.15 15:23', status: '充值成功', price: 500},
              {id: 1, name: '小钻风(Smore)', time: '2018.11.15 15:23', status: '充值成功', price: 500},
              {id: 1, name: '小钻风(Smore)', time: '2018.11.15 15:23', status: '充值成功', price: 500},
              {id: 1, name: '小钻风(Smore)', time: '2018.11.15 15:23', status: '充值成功', price: 500}
              ],
            queryLoading: false,
            moreLoading: false,
            allLoaded: false
          };
        },
        methods: {
          loadMore () {
          }
        }
    };
</script>

<style lang="stylus" scoped>
  .user-pay
    ul
      background #fff;
      li
        display flex; align-items center; height 60px; border-bottom 1px solid #ECECEC;
        section
          flex 1;
</style>
